<template>
  <div>
    <el-dialog title="考试计划" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div>
        <el-row>
          <el-tabs v-model="activeName2">
            <el-tab-pane label="基础信息" name="first">
              <el-form ref="form" :model="form" label-width="120px" :inline="true">
                <el-form-item label="试卷名称：">
                  <el-input style="width: 200px" v-model="form.planName" disabled></el-input>
                </el-form-item>
                <el-form-item label="及格分数">
                  <el-input style="width: 200px" v-model="form.passScore" disabled></el-input>
                </el-form-item>
                <el-form-item label="组题方式">
                  <el-input style="width: 200px" v-model="form.createType" disabled>
                  </el-input>
                </el-form-item>
                <el-form-item label="总题数">
                  <el-input style="width: 200px" v-model="form.questionNum" disabled></el-input>
                </el-form-item>
                <el-form-item label="试卷备注">
                  <el-input style="width: 200px" v-model="form.remark" disabled></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-row>
        <el-row>
          <el-tabs v-model="activeName">
            <el-tab-pane label="课件列表" name="first">
              <el-table :data="courseList" style="width: 100%" height="300px"
                :default-sort="{ prop: 'courseSecond', order: 'descending' }">
                <el-table-column prop="courseName" label="课件名">
                </el-table-column>
                <el-table-column prop="courseSecond" label="课件时长(秒)" sortable>
                  <template slot-scope="scope">
                    {{ formatDuration(scope.row.courseSecond) }} <!-- 使用格式化方法 -->
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="题目列表" name="second">
              <el-table :data="questionList" style="width: 100%" height="300px">
                <el-table-column prop="questionName" label="题目">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPlanInfo } from "@/api/train/index.js";
import {formatDuration} from '@/utils/ruoyi.js'
export default {
  data() {
    return {
      dialogVisible: false,
      activeName: "first",
      activeName2: 'first',
      form: {},
      courseList: [],
      questionList: [],
    };
  },

  mounted() { },

  methods: {
    show(id) {
      this.dialogVisible = true;
      getPlanInfo({
        planId: id,
      }).then((res) => {
        console.log(res);
        this.form = res.data.plan;
        this.courseList = res.data.courseList;
        this.questionList = res.data.questionList;
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },

  },
};
</script>

<style lang="scss" scoped></style>
